<template>
  
  <div>
     <!-- 验证码登录 -->
          <el-form ref="userInfo" 
              :model="userInfo"
              label-width="80px"      
              :rules="rules"                     
          >
              <el-form-item label="手机号" prop='phonenumber' >
                <el-col :span="21">
                  <el-input v-model="userInfo.phonenumber"></el-input>
                </el-col>
              </el-form-item>     
              <el-form-item label="验证码" prop='password'>
                <el-col :span="13">
                  <el-input v-model="userInfo.code"></el-input>
                </el-col>
               
                  <el-button type="primary" class="sendCode"
                     @click="sendCode"
                     :disabled = 'disabled'
                  >{{codeMsg}}</el-button>
                
              </el-form-item>                                            
              <el-form-item>
                <el-button type="primary" @click="codeLogin">登录</el-button>
                <el-button @click="cancel" >取消</el-button>
              </el-form-item>
              <div class="changeCode">
              <span @click="changePwd">密码登录</span>             
            </div>
          </el-form>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import {sendCode,codeLogin} from '@/networdk/user'
export default {
  name:'codeLogin',
  data() {
    let checkPhone = (rule,value,callback)=>{
      let phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
     
      if(!value){
        callback()
      } else {
        if(phoneReg.test(value)){
          callback()
        } else{
          callback(new Error('手机号不能为空，并且是11位数字'))
        }
      }
    }     
    return {    
        disabled:false,    
        userInfo:{
          phonenumber : '',
          code:''
        },

      isShow:false,
      storage:false,      
        rules:{
         phonenumber: [
            {
              required:'true',
              trigger:'blur',                            
              validator:checkPhone,
              message:'手机号不能为空，并且是11位数字',
            }
          ]
      } ,
      codeNum : 6  ,
      codeMsg:'获取短信验证码'
    }
  },
  methods: {
    // 发送验证码
    sendCode(){
      // 验证
      const _Message = Message     
      this.$refs.userInfo.validate((valid)=>{
        console.log(valid);
        if(!valid){
            _Message({
              type:'error',
              message:'请输入正确的信息格式'
            })
            return ;
        } else {
            let phone = this.userInfo.phonenumber        
            // 请求短信验证码接口
            sendCode({phone}).then(res=>{
              console.log(res);
            })
            // 禁用按钮
            this.disabled = true
            // 倒计时
            let timer = setInterval(()=>{
              --this.codeNum
              this.codeMsg = `重新发送 ${this.codeNum}`
            },1000)
            // 判断何时停止定时器
            setTimeout(()=>{
              clearInterval(timer)
              this.codeNum = 6
              this.disabled = !this.disabled
              this.codeMsg = '获取短信验证码'
            },6000)
        }
      })


    },

    // 登录 判断验证码是否正确
    codeLogin(){
      let phonenumber = this.userInfo.phonenumber
      let code = this.userInfo.code
      codeLogin({phonenumber,code}).then(res=>{
          console.log('验证码登录');
          console.log(res);
      })
    },
    cancel(){
      this.$emit('cancel')
      this.$refs['userInfo'].resetFields()
    },

    // 切换到密码登录
    changePwd(){
      this.$emit('changeCode')
    }
  },

}
</script>

<style scoped>
.sendCode{
  width: 186px;
}
</style>